{% extends 'base.html' %}
{% load static %}

{% block title %}对战列表 - Creeps Judge{% endblock %}

{% block extra_css %}
<style>

    .container {
        background: transparent;
        backdrop-filter: none;
        border-radius: 0;
        padding: 0;
        margin-top: 20px;
        margin-bottom: 20px;
        box-shadow: none;
        border: none;
        color: rgba(255, 255, 255, 0.9);
    }

    .battle-card {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(30, 30, 60, 0.9) 100%);
        backdrop-filter: blur(15px);
        border-radius: 20px;
        border: 2px solid rgba(100, 150, 255, 0.5);
        margin-bottom: 25px;
        transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        position: relative;
        overflow: hidden;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.3),
            0 0 20px rgba(100, 150, 255, 0.2),
            inset 0 0 15px rgba(255, 255, 255, 0.05);
        will-change: transform;
    }

    .battle-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transition: left 0.5s ease;
    }

    .battle-card:hover {
        transform: translateY(-6px);
        border-color: rgba(100, 150, 255, 0.8);
        box-shadow:
            0 12px 35px rgba(0, 0, 0, 0.4),
            0 0 25px rgba(100, 150, 255, 0.3),
            0 0 12px rgba(255, 255, 255, 0.2);
    }

    .battle-card:hover::before {
        left: 100%;
    }

    .battle-header {
        background: linear-gradient(135deg, rgba(100, 150, 255, 0.8), rgba(0, 212, 255, 0.8));
        color: white;
        padding: 25px;
        position: relative;
        backdrop-filter: blur(10px);
        border-bottom: 2px solid rgba(100, 150, 255, 0.4);
    }

    .battle-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        align-items: center;
        margin-bottom: 18px;
        font-size: 0.95rem;
        color: rgba(255, 255, 255, 0.7);
    }

    .battle-meta-item {
        display: flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, 0.1);
        padding: 6px 12px;
        border-radius: 15px;
        backdrop-filter: blur(5px);
    }

    .battle-meta-item i {
        color: rgba(100, 150, 255, 0.8);
    }

    .status-badge {
        padding: 8px 15px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .status-pending {
        background: linear-gradient(45deg, #ffc107, #ff8f00);
        color: white;
        box-shadow: 0 0 15px rgba(255, 193, 7, 0.4);
    }

    .status-running {
        background: linear-gradient(45deg, #17a2b8, #138496);
        color: white;
        box-shadow: 0 0 15px rgba(23, 162, 184, 0.4);
    }

    .status-finished {
        background: linear-gradient(45deg, #28a745, #1e7e34);
        color: white;
        box-shadow: 0 0 15px rgba(40, 167, 69, 0.4);
    }



    .status-error {
        background: linear-gradient(45deg, #dc3545, #c82333);
        color: white;
        box-shadow: 0 0 15px rgba(220, 53, 69, 0.4);
    }

    .btn-gradient {
        background: linear-gradient(135deg, rgba(100, 150, 255, 0.8), rgba(0, 212, 255, 0.8));
        border: 2px solid rgba(255, 255, 255, 0.3);
        color: white;
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 600;
        transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
        text-decoration: none;
        position: relative;
        overflow: hidden;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        will-change: transform;
    }

    .btn-gradient:hover {
        background: linear-gradient(135deg, rgba(0, 212, 255, 1), rgba(100, 150, 255, 1));
        border-color: rgba(255, 255, 255, 0.6);
        box-shadow: 0 0 15px rgba(100, 150, 255, 0.4);
        transform: translateY(-2px);
        color: white;
        text-decoration: none;
    }

    .btn-outline-gradient {
        background: rgba(255, 255, 255, 0.1);
        border: 2px solid rgba(100, 150, 255, 0.6);
        color: #6496ff;
        padding: 8px 16px;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.3s ease;
        text-decoration: none;
        backdrop-filter: blur(5px);
    }

    .btn-outline-gradient:hover {
        background: rgba(100, 150, 255, 0.2);
        border-color: rgba(100, 150, 255, 0.8);
        color: white;
        text-decoration: none;
        box-shadow: 0 0 15px rgba(100, 150, 255, 0.3);
    }

    .empty-state {
        text-align: center;
        padding: 80px 30px;
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(30, 30, 60, 0.9) 100%);
        backdrop-filter: blur(15px);
        border-radius: 20px;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.3),
            0 0 20px rgba(100, 150, 255, 0.2),
            inset 0 0 15px rgba(255, 255, 255, 0.05);
        border: 2px solid rgba(100, 150, 255, 0.5);
    }

    .empty-state-icon {
        font-size: 5rem;
        background: linear-gradient(135deg, #00d4ff, #6496ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 25px;
        filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.3));
    }

    .empty-state h3 {
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 15px;
        font-size: 1.8rem;
    }

    .empty-state p {
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 30px;
        font-size: 1.1rem;
    }

    .pagination {
        justify-content: center;
        margin-top: 30px;
    }

    .page-link {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(100, 150, 255, 0.3);
        color: rgba(255, 255, 255, 0.8);
        padding: 10px 15px;
        margin: 0 2px;
        border-radius: 8px;
        backdrop-filter: blur(5px);
        transition: all 0.3s ease;
    }

    .page-link:hover {
        background: rgba(100, 150, 255, 0.2);
        border-color: rgba(100, 150, 255, 0.6);
        color: white;
        text-decoration: none;
    }

    .page-item.active .page-link {
        background: linear-gradient(135deg, rgba(100, 150, 255, 0.8), rgba(0, 212, 255, 0.8));
        border-color: rgba(100, 150, 255, 0.8);
        color: white;
    }

    .text-muted {
        color: rgba(255, 255, 255, 0.5) !important;
    }

    .result-win {
        color: #28a745;
        text-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
    }

    .result-lose {
        color: #dc3545;
        text-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
    }

    .result-draw {
        color: #ffc107;
        text-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
    }

    .score-badge {
        background: rgba(255, 255, 255, 0.2);
        color: white;
        padding: 4px 8px;
        border-radius: 12px;
        font-weight: bold;
        backdrop-filter: blur(5px);
    }

    .pagination-container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 30px;
    }

    .pagination-btn {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(100, 150, 255, 0.3);
        color: rgba(255, 255, 255, 0.8);
        padding: 10px 15px;
        border-radius: 8px;
        backdrop-filter: blur(5px);
        transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        text-decoration: none;
        min-width: 44px;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        will-change: transform;
    }

    .pagination-btn:hover {
        background: rgba(100, 150, 255, 0.2);
        border-color: rgba(100, 150, 255, 0.6);
        color: white;
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(100, 150, 255, 0.3);
    }

    .pagination-active {
        background: linear-gradient(135deg, rgba(100, 150, 255, 0.8), rgba(0, 212, 255, 0.8)) !important;
        border-color: rgba(100, 150, 255, 0.8) !important;
        color: white !important;
        box-shadow: 0 0 15px rgba(100, 150, 255, 0.4);
    }

    /* 紧凑统计栏 */
    .compact-stats-bar {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(30, 30, 60, 0.9) 100%);
        backdrop-filter: blur(15px);
        border-radius: 15px;
        border: 2px solid rgba(100, 150, 255, 0.5);
        padding: 20px 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.3),
            0 0 20px rgba(100, 150, 255, 0.2),
            inset 0 0 15px rgba(255, 255, 255, 0.05);
    }

    .stats-summary {
        display: flex;
        gap: 25px;
        align-items: center;
        flex-wrap: wrap;
    }

    .stat-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.9);
        font-weight: 500;
    }

    .stat-item i {
        font-size: 1rem;
    }

    .action-controls {
        display: flex;
        gap: 15px;
        align-items: center;
    }

    .filter-select {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        padding: 8px 12px;
        color: white;
        font-size: 0.85rem;
        outline: none;
        transition: all 0.3s ease;
        min-width: 120px;
    }

    .filter-select:focus {
        border-color: rgba(100, 150, 255, 0.8);
        box-shadow: 0 0 10px rgba(100, 150, 255, 0.3);
    }

    .filter-select option {
        background: #1a1a2e;
        color: white;
    }

    .btn-create {
        background: linear-gradient(135deg, rgba(100, 150, 255, 0.8), rgba(0, 212, 255, 0.8));
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: white;
        padding: 8px 16px;
        border-radius: 8px;
        text-decoration: none;
        font-size: 0.85rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
        will-change: transform;
    }

    .btn-create:hover {
        background: linear-gradient(135deg, rgba(0, 212, 255, 1), rgba(100, 150, 255, 1));
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(100, 150, 255, 0.4);
        color: white;
        text-decoration: none;
    }

    .btn-refresh {
        background: linear-gradient(135deg, rgba(40, 167, 69, 0.8), rgba(34, 139, 34, 0.8));
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: white;
        padding: 8px 16px;
        border-radius: 8px;
        text-decoration: none;
        font-size: 0.85rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
        will-change: transform;
        cursor: pointer;
    }

    .btn-refresh:hover {
        background: linear-gradient(135deg, rgba(34, 139, 34, 1), rgba(40, 167, 69, 1));
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
        color: white;
        text-decoration: none;
    }



    /* 紧凑战斗表格 */
    .battle-table {
        background: linear-gradient(135deg, rgba(45, 55, 85, 0.4) 0%, rgba(35, 45, 75, 0.6) 100%);
        backdrop-filter: blur(20px);
        border-radius: 20px;
        border: 1px solid rgba(120, 140, 200, 0.3);
        overflow: hidden;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.2),
            0 0 15px rgba(120, 140, 200, 0.1),
            inset 0 0 20px rgba(255, 255, 255, 0.03);
    }

    .table-header {
        display: grid;
        grid-template-columns: 80px 80px 150px 30px 2fr 100px 80px 120px 120px;
        gap: 15px;
        padding: 20px 25px;
        background: linear-gradient(135deg, rgba(60, 80, 120, 0.6), rgba(50, 70, 110, 0.7));
        color: rgba(220, 230, 255, 0.95);
        font-weight: 600;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid rgba(120, 140, 200, 0.2);
    }

    .battle-row {
        display: grid;
        grid-template-columns: 80px 80px 150px 30px 2fr 100px 80px 120px 120px;
        gap: 15px;
        padding: 15px 25px;
        border-bottom: 1px solid rgba(120, 140, 200, 0.15);
        transition: background 0.2s ease, transform 0.2s ease;
        align-items: center;
        background: rgba(255, 255, 255, 0.02);
        will-change: transform;
    }

    .battle-row:hover {
        background: rgba(120, 140, 200, 0.08);
        transform: translateX(3px);
        border-left: 3px solid rgba(120, 140, 200, 0.4);
    }

    .battle-row:last-child {
        border-bottom: none;
    }

    .battle-row:nth-child(even) {
        background: rgba(255, 255, 255, 0.01);
    }

    .battle-row:nth-child(even):hover {
        background: rgba(120, 140, 200, 0.08);
    }

    .col-id {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .battle-id {
        font-weight: bold;
        color: rgba(220, 230, 255, 0.95);
        font-size: 0.9rem;
    }

    .mode-tag {
        font-size: 0.75rem;
        font-weight: bold;
        padding: 2px 6px;
        border-radius: 12px;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        max-width: 100px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .mode-tag.ranked {
        background: linear-gradient(45deg, #ff6b35, #f7931e);
        color: white;
        border: 2px solid rgba(255, 107, 53, 0.6);
        box-shadow: 0 0 15px rgba(255, 107, 53, 0.4);
    }

    .mode-tag.practice {
        background: linear-gradient(45deg, #28a745, #20c997);
        color: white;
        border: 2px solid rgba(40, 167, 69, 0.6);
        box-shadow: 0 0 15px rgba(40, 167, 69, 0.4);
    }



    .mode-tag.unknown {
        background: linear-gradient(45deg, #6c757d, #495057);
        color: white;
        border: 2px solid rgba(108, 117, 125, 0.6);
        box-shadow: 0 0 15px rgba(108, 117, 125, 0.4);
    }

    .mode-tag.worldcup-regular {
        background: linear-gradient(45deg, #a89110, #FFA500);
        color: white;
        border: 2px solid rgba(255, 215, 0, 0.6);
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    }

    .mode-tag.worldcup-championship {
        background: linear-gradient(45deg, #FF6B35, #DC143C);
        color: white;
        border: 2px solid rgba(255, 107, 53, 0.6);
        box-shadow: 0 0 15px rgba(255, 107, 53, 0.4);
    }

    .self-battle-tag {
        background: linear-gradient(45deg, #9c27b0, #673ab7);
        color: white;
        border: 1px solid rgba(156, 39, 176, 0.6);
        padding: 2px 6px;
        border-radius: 8px;
        font-size: 0.7rem;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-left: 5px;
        display: inline-block;
        box-shadow: 0 0 10px rgba(156, 39, 176, 0.3);
        transition: all 0.3s ease;
    }

    .self-battle-tag:hover {
        transform: translateY(-1px) scale(1.05);
        box-shadow: 0 2px 8px rgba(156, 39, 176, 0.4);
    }

    .mode-tag:hover {
        transform: translateY(-2px) scale(1.05);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    .col-status .status-badge {
        font-size: 0.75rem;
        padding: 4px 8px;
    }

    .col-type {
        text-align: center;
    }

    .col-type .mode-tag {
        max-width: none !important;
        width: 100%;
    }

    .col-spacer {
        /* 间隔列，用于调整布局 */
    }

    .col-players {
        min-width: 0;
    }

    .player-vs {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.85rem;
    }

    /* 基地血条样式 */
    .base-health-bar {
        margin-top: 4px;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.75rem;
    }

    .health-bar-container {
        width: 60px;
        height: 8px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.2);
        position: relative;
    }

    .health-bar-fill {
        height: 100%;
        background: #dc3545;
        border-radius: 3px;
        transition: width 0.3s ease;
        min-width: 2px;
        position: relative;
    }

    .health-bar-fill::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
        animation: shimmer 2s infinite;
    }

    @keyframes shimmer {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }

    .health-text {
        color: rgba(255, 255, 255, 0.8);
        font-weight: 600;
        min-width: 25px;
        text-align: right;
    }

    /* 调整战斗列表中的玩家信息布局 */
    .battle-row .player-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        color: rgba(200, 215, 245, 0.9);
        min-width: 0;
        flex: 1;
    }

    .battle-row .player-main-info {
        display: flex;
        align-items: center;
        gap: 4px;
        width: 100%;
    }

    .battle-item .player-info.current-user {
        color: rgba(140, 170, 255, 1);
        font-weight: 600;
    }

    .battle-item .player-info small {
        color: rgba(160, 180, 220, 0.7);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 玩家名字颜色和字体大小样式 - 只针对用户名 */
    .player-info.player-left .username {
        font-size: 1rem;
        color: #dc3545 !important; /* 红色 */
        font-weight: 600;
    }

    .player-info.player-right .username {
        font-size: 1rem;
        color: #007bff !important; /* 蓝色 */
        font-weight: 600;
    }

    .vs-indicator {
        font-size: 1rem;
        margin: 0 5px;
    }

    .col-result {
        text-align: center;
    }

    .score-display {
        font-weight: bold;
        color: rgba(220, 230, 255, 0.95);
        font-size: 0.9rem;
        background: rgba(120, 140, 200, 0.15);
        padding: 4px 8px;
        border-radius: 8px;
        display: inline-block;
        border: 1px solid rgba(120, 140, 200, 0.2);
    }

    .rounds-display {
        font-weight: bold;
        color: rgba(220, 230, 255, 0.95);
        font-size: 0.9rem;
        background: rgba(100, 180, 120, 0.15);
        padding: 4px 8px;
        border-radius: 8px;
        display: inline-block;
        border: 1px solid rgba(100, 180, 120, 0.2);
        text-align: center;
    }

    .col-time {
        font-size: 0.85rem;
    }

    .time-info {
        color: rgba(200, 215, 245, 0.9);
    }

    .time-info small {
        color: rgba(160, 180, 220, 0.7);
    }

    .col-actions {
        text-align: center;
    }

    .action-buttons {
        display: flex;
        gap: 5px;
        justify-content: center;
    }

    .btn-action {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        font-size: 0.85rem;
        border: none;
        cursor: pointer;
        will-change: transform;
    }

    .btn-action:hover {
        transform: translateY(-2px);
        text-decoration: none;
    }

    .btn-action.btn-detail {
        background: rgba(120, 140, 200, 0.15);
        color: rgba(140, 170, 255, 1);
        border: 1px solid rgba(120, 140, 200, 0.3);
    }

    .btn-action.btn-detail:hover {
        background: rgba(120, 140, 200, 0.25);
        color: rgba(220, 230, 255, 0.95);
        box-shadow: 0 4px 12px rgba(120, 140, 200, 0.2);
    }

    .btn-action.btn-replay {
        background: rgba(60, 180, 100, 0.15);
        color: rgba(80, 200, 120, 1);
        border: 1px solid rgba(60, 180, 100, 0.3);
    }

    .btn-action.btn-replay:hover {
        background: rgba(60, 180, 100, 0.25);
        color: rgba(220, 255, 230, 0.95);
        box-shadow: 0 4px 12px rgba(60, 180, 100, 0.2);
    }

    .btn-action.btn-cancel {
        background: rgba(220, 80, 100, 0.15);
        color: rgba(240, 100, 120, 1);
        border: 1px solid rgba(220, 80, 100, 0.3);
    }

    .btn-action.btn-cancel:hover {
        background: rgba(220, 80, 100, 0.25);
        color: rgba(255, 220, 230, 0.95);
        box-shadow: 0 4px 12px rgba(220, 80, 100, 0.2);
    }

    /* 页面特定样式 - 对战列表 */

    /* 响应式设计 */
    @media (max-width: 768px) {

        .table-header,
        .battle-row {
            grid-template-columns: 60px 60px 120px 20px 1fr 100px 80px;
            gap: 8px;
            padding: 12px 15px;
        }

        .col-time {
            display: none;
        }

        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .action-panel {
            flex-direction: column;
            gap: 15px;
        }

        .player-vs {
            flex-direction: column;
            gap: 5px;
            font-size: 0.8rem;
        }

        .vs-indicator {
            order: -1;
        }
    }

    @media (max-width: 480px) {

        .table-header,
        .battle-row {
            grid-template-columns: 50px 50px 60px 15px 1fr;
            gap: 6px;
            padding: 10px 12px;
        }

        .col-time,
        .col-actions {
            display: none;
        }

        .col-result {
            display: none;
        }

        .stats-grid {
            grid-template-columns: 1fr;
        }

        .battle-stats-panel {
            padding: 20px;
        }

        .stat-card {
            padding: 15px;
        }

        .action-buttons {
            flex-direction: column;
            gap: 3px;
        }

        .btn-action {
            width: 28px;
            height: 28px;
            font-size: 0.75rem;
        }
    }
</style>
{% endblock %}

{% block content %}


<div class="container mt-4">
    <div class="row">
        <div class="col-md-12">
            {% if page_obj %}
            <!-- 紧凑统计栏 -->
            <div class="compact-stats-bar mb-4">
                <div class="stats-summary">
                    <span class="stat-item">
                        <i class="fas fa-sword-cross"></i> 总计 {{ page_obj.paginator.count }}
                    </span>
                    <span class="stat-item">
                        <i class="fas fa-trophy text-success"></i> 胜 {{ win_count|default:0 }}
                    </span>
                    <span class="stat-item">
                        <i class="fas fa-skull text-danger"></i> 负 {{ lose_count|default:0 }}
                    </span>
                    <span class="stat-item">
                        <i class="fas fa-percentage text-warning"></i> {{ win_rate|default:"0" }}%
                    </span>
                     <small class="text-muted" style="display: block; font-size: 0.8rem; margin-top: 2px;">(只有自己打自己不计入胜负统计)</small>
                </div>
                <div class="action-controls">
                    <select class="filter-select" onchange="filterBattles()">
                        <option value="all">全部状态</option>
                        <option value="pending">等待中</option>
                        <option value="running">进行中</option>
                        <option value="finished">已完成</option>
                        <option value="error">错误</option>
                    </select>
                    <select class="filter-select" onchange="filterBattles()">
                        <option value="all">全部类型</option>
                        <option value="ranked">排位</option>
                        <option value="practice">练习</option>
                        <option value="worldcup_regular">世界杯常规赛</option>
                        <option value="worldcup_championship">世界杯冠军赛</option>
                    </select>
                    <button class="btn-refresh" onclick="location.reload()" style="margin-right: 10px;">
                        <i class="fas fa-sync-alt"></i> 刷新
                    </button>
                    {% if not user.is_staff and user.is_authenticated %}
                        {% if battle_creation_enabled %}
                            <a href="{% url 'battles:battle_create' %}" class="btn-create">
                                <i class="fas fa-plus"></i> 创建对战
                            </a>
                        {% else %}
                            <button class="btn-create disabled" onclick="showFeatureDisabledAlert()" title="点击查看详情">
                                <i class="fas fa-plus"></i> 创建对战
                            </button>
                        {% endif %}
                    {% endif %}
                </div>
            </div>

            <!-- 紧凑战斗表格 -->
            <div class="battle-table">
                <div class="table-header">
                    <div class="col-id">ID</div>
                    <div class="col-status">状态</div>
                    <div class="col-type">类型</div>
                    <div class="col-spacer"></div>
                    <div class="col-players">对战双方</div>
                    <div class="col-result">击杀数</div>
                    <div class="col-rounds">回合</div>
                    <div class="col-time">时间</div>
                    <div class="col-actions">操作</div>
                </div>
                {% for battle in page_obj %}
                <div class="battle-row" data-status="{{ battle.status }}" data-type="{{ battle.battle_type }}">
                    <div class="col-id">
                        <span class="battle-id">#{{ battle.id }}</span>
                    </div>
                    <div class="col-status">
                        {% if battle.status == 'pending' %}
                        <span class="status-badge status-pending">等待中</span>
                        {% elif battle.status == 'running' %}
                        <span class="status-badge status-running">进行中</span>
                        {% elif battle.status == 'finished' %}
                        <span class="status-badge status-finished">已完成</span>

                        {% elif battle.status == 'error' %}
                        <span class="status-badge status-error">错误</span>
                        {% endif %}
                    </div>
                    <div class="col-type">
                        {% if battle.battle_type == 'ranked' %}
                        <span class="mode-tag ranked">排位</span>
                        {% elif battle.battle_type == 'practice' %}
                        <span class="mode-tag practice">练习</span>
                        {% elif battle.battle_type == 'worldcup_regular' %}
                        <span class="mode-tag worldcup-regular">世界杯常规赛</span>
                        {% elif battle.battle_type == 'worldcup_championship' %}
                        <span class="mode-tag worldcup-championship">世界杯冠军赛</span>
                        {% else %}
                        <span class="mode-tag unknown">未知</span>
                        {% endif %}
                        {% if battle.player1 == battle.player2 %}
                            <span class="self-battle-tag">自我对战</span>
                        {% endif %}
                    </div>
                    <div class="col-spacer"></div>
                    <div class="col-players">
                        <div class="player-vs">
                            <div class="player-info player-left {% if battle.player1 == request.user %}current-user{% endif %}">
                                <div class="player-main-info">
                                    {% if battle.status == 'finished' %}
                                        {% if battle.result == 'player1_win' %}
                                        <i class="fas fa-crown text-warning"></i>
                                        {% elif battle.result == 'player2_win' %}
                                        <i class="fas fa-skull text-danger"></i>
                                        {% else %}
                                        <i class="fas fa-handshake text-info"></i>
                                        {% endif %}
                                    {% else %}
                                    <i class="fas fa-user"></i>
                                    {% endif %}
                                    <span class="username">{{ battle.player1.username }}</span>
                                    <small>({{ battle.player1_code.title|truncatechars:15 }})</small>
                                </div>
                                {% if battle.status == 'finished' and battle.player1_stats.baseHealth is not None %}
                                <div class="base-health-bar">
                                    <div class="health-bar-container">
                                        <div class="health-bar-fill" style="width: {{ battle.get_player1_base_health_percentage }}%"></div>
                                    </div>
                                    <span class="health-text">{{ battle.player1_stats.baseHealth|default:0 }}</span>
                                </div>
                                {% endif %}
                            </div>
                            <span class="vs-indicator">
                                <i class="fas fa-sword text-muted"></i>
                            </span>
                            <div class="player-info player-right {% if battle.player2 == request.user %}current-user{% endif %}">
                                <div class="player-main-info">
                                    {% if battle.status == 'finished' %}
                                        {% if battle.result == 'player2_win' %}
                                        <i class="fas fa-crown text-warning"></i>
                                        {% elif battle.result == 'player1_win' %}
                                        <i class="fas fa-skull text-danger"></i>
                                        {% else %}
                                        <i class="fas fa-handshake text-info"></i>
                                        {% endif %}
                                    {% else %}
                                    <i class="fas fa-user"></i>
                                    {% endif %}
                                    <span class="username">{{ battle.player2.username|default:"等待对手" }}</span>
                                    <small>({{ battle.player2_code.title|truncatechars:15|default:"未知" }})</small>
                                </div>
                                {% if battle.status == 'finished' and battle.player2_stats.baseHealth is not None %}
                                <div class="base-health-bar">
                                    <div class="health-bar-container">
                                        <div class="health-bar-fill" style="width: {{ battle.get_player2_base_health_percentage }}%"></div>
                                    </div>
                                    <span class="health-text">{{ battle.player2_stats.baseHealth|default:0 }}</span>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col-result">
                        {% if battle.status == 'finished' %}
                        <span class="score-display">{{ battle.player1_stats.stats.kills|default:0 }} : {{ battle.player2_stats.stats.kills|default:0 }}</span>
                        {% else %}
                        <span class="text-muted">--</span>
                        {% endif %}
                    </div>
                    <div class="col-rounds">
                        {% if battle.status == 'finished' %}
                        <span class="rounds-display">{{ battle.total_rounds|default:0 }}</span>
                        {% else %}
                        <span class="text-muted">--</span>
                        {% endif %}
                    </div>
                    <div class="col-time">
                        <div class="time-info">
                            <div>{{ battle.created_at|date:"m-d H:i" }}</div>
                            {% if battle.status == 'finished' and battle.duration %}
                            <small class="text-muted">{{ battle.duration }}s</small>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-actions">
                        <div class="action-buttons">
                            <a href="{% url 'battles:battle_detail' battle.id %}" class="btn-action btn-detail"
                                title="查看详情">
                                <i class="fas fa-eye"></i>
                            </a>
                            {% if battle.status == 'finished' %}
                            <a href="{% url 'battles:battle_detail' battle.id %}" class="btn-action btn-replay"
                                title="观看回放">
                                <i class="fas fa-play"></i>
                            </a>
                            {% endif %}

                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>

            <!-- 分页 -->
            {% if page_obj.has_other_pages %}
            <nav aria-label="对战列表分页" class="mt-4">
                <div class="pagination-container">
                    {% if page_obj.has_previous %}
                    <a class="pagination-btn" href="?page=1">
                        <i class="fas fa-angle-double-left"></i>
                    </a>
                    <a class="pagination-btn" href="?page={{ page_obj.previous_page_number }}">
                        <i class="fas fa-angle-left"></i>
                    </a>
                    {% endif %}

                    {% for num in page_obj.paginator.page_range %}
                    {% if page_obj.number == num %}
                    <span class="pagination-btn pagination-active">{{ num }}</span>
                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %} <a
                        class="pagination-btn" href="?page={{ num }}">{{ num }}</a>
                        {% endif %}
                        {% endfor %}

                        {% if page_obj.has_next %}
                        <a class="pagination-btn" href="?page={{ page_obj.next_page_number }}">
                            <i class="fas fa-angle-right"></i>
                        </a>
                        <a class="pagination-btn" href="?page={{ page_obj.paginator.num_pages }}">
                            <i class="fas fa-angle-double-right"></i>
                        </a>
                        {% endif %}
                </div>
            </nav>
            {% endif %}
            {% else %}
            <div class="empty-state">
                <div class="empty-state-icon">
                    <i class="fas fa-sword-cross"></i>
                </div>
                <h3>还没有对战记录</h3>
                {% if not user.is_staff and user.is_authenticated %}
                    {% if battle_creation_enabled %}
                        <p>开始您的第一场对战吧！</p>
                        <a href="{% url 'battles:battle_create' %}" class="btn-gradient">
                            <i class="fas fa-plus"></i> 创建对战
                        </a>
                    {% else %}
                        <p>创建对战功能暂时不可用</p>
                        <button class="btn-gradient disabled" onclick="showFeatureDisabledAlert()" title="点击查看详情">
                            <i class="fas fa-plus"></i> 创建对战
                        </button>
                    {% endif %}
                {% else %}
                    <p>暂无对战记录可管理</p>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>
</div>

<script>
    // 优化的过滤函数
    function filterBattles() {
        const rows = document.querySelectorAll('.battle-row');
        const battleTable = document.querySelector('.battle-table');
        const statusSelect = document.querySelectorAll('.filter-select')[0];
        const typeSelect = document.querySelectorAll('.filter-select')[1];
        const selectedStatus = statusSelect ? statusSelect.value : 'all';
        const selectedType = typeSelect ? typeSelect.value : 'all';
        let visibleCount = 0;

        // 使用 requestAnimationFrame 优化性能
        requestAnimationFrame(() => {
            rows.forEach(row => {
                const rowStatus = row.getAttribute('data-status');
                const rowType = row.getAttribute('data-type');

                const statusMatch = selectedStatus === 'all' || rowStatus === selectedStatus;
                const typeMatch = selectedType === 'all' || rowType === selectedType;
                const shouldShow = statusMatch && typeMatch;

                if (shouldShow) {
                    row.style.display = 'grid';
                    row.style.opacity = '1';
                    visibleCount++;
                } else {
                    row.style.display = 'none';
                    row.style.opacity = '0';
                }
            });

            // 处理空状态显示
            handleEmptyState(visibleCount, selectedStatus, selectedType, battleTable);
        });
    }

    // 处理空状态显示
    function handleEmptyState(visibleCount, status, type, container) {
        let emptyMessage = document.querySelector('.filter-empty-message');

        if (visibleCount === 0 && (status !== 'all' || type !== 'all')) {
            if (!emptyMessage) {
                emptyMessage = createEmptyStateMessage(status, type);
                container.appendChild(emptyMessage);
            } else {
                updateEmptyStateMessage(emptyMessage, status, type);
            }
            emptyMessage.style.display = 'block';
        } else if (emptyMessage) {
            emptyMessage.style.display = 'none';
        }
    }

    // 创建空状态消息
    function createEmptyStateMessage(status, type) {
        const emptyMessage = document.createElement('div');
        emptyMessage.className = 'filter-empty-message';
        emptyMessage.style.cssText = `
        text-align: center;
        padding: 40px 20px;
        color: rgba(255, 255, 255, 0.6);
        background: rgba(0, 0, 0, 0.3);
        border-radius: 15px;
        margin: 20px 0;
    `;
        updateEmptyStateMessage(emptyMessage, status, type);
        return emptyMessage;
    }

    // 更新空状态消息内容
    function updateEmptyStateMessage(element, status, type) {
        const statusText = getStatusText(status);
        const typeText = getTypeText(type);
        let filterText = '';

        if (status !== 'all' && type !== 'all') {
            filterText = `"${statusText}" 状态且 "${typeText}" 类型`;
        } else if (status !== 'all') {
            filterText = `"${statusText}" 状态`;
        } else if (type !== 'all') {
            filterText = `"${typeText}" 类型`;
        }

        element.innerHTML = `
        <i class="fas fa-search" style="font-size: 2.5rem; margin-bottom: 15px; opacity: 0.5;"></i>
        <h4 style="margin-bottom: 10px;">没有找到 ${filterText} 的对战</h4>
        <p style="margin: 0;">尝试选择其他筛选条件或创建新的对战</p>
    `;
    }

    // 状态文本映射
    function getStatusText(status) {
        const statusMap = {
            'pending': '等待中',
            'running': '进行中',
            'finished': '已完成',
            'error': '错误'
        };
        return statusMap[status] || status;
    }

    // 类型文本映射
    function getTypeText(type) {
        const typeMap = {
            'ranked': '排位',
            'practice': '练习',
            'worldcup_regular': '世界杯常规赛',
            'worldcup_championship': '世界杯冠军赛'
        };
        return typeMap[type] || type;
    }

    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function () {
        // 为过滤选择器添加当前选中状态保持
        const statusSelect = document.querySelectorAll('.filter-select')[0];
        const typeSelect = document.querySelectorAll('.filter-select')[1];

        if (statusSelect && typeSelect) {
            const urlParams = new URLSearchParams(window.location.search);
            const statusParam = urlParams.get('status');
            const typeParam = urlParams.get('type');

            if (statusParam) {
                statusSelect.value = statusParam;
            }
            if (typeParam) {
                typeSelect.value = typeParam;
            }

            if (statusParam || typeParam) {
                filterBattles();
            }
        }
    });

    // 显示功能禁用提示
    function showFeatureDisabledAlert() {
        alert('创建对战功能已被管理员暂时关闭。\n\n如有疑问，请联系系统管理员。');
    }
</script>
{% endblock %}